<template>
  <div>
    <vxe-modal v-model="toggleProxy" :width="width" :height="height" :min-width="minWidth" :min-height="minHeight" show-footer destroy-on-close show-zoom @close="modalClose">
      <template #title>
        <span>{{ `${modalTitle}` }}</span>
      </template>
      <template #default>
        <Splitpanes>
          <Pane size="15">
            <div style="height: 100%; overflow-y: auto; padding: 5px 0">
              <div :ref="`itemObj${index}`" v-for="(item, index) in reportList" :key="index" :style="{ marginTop: index > 0 ? '10px' : '' }" class="row-item" :class="item.isChecked ? 'actived' : ''" @click="reportItemClick(item)">
                <div>
                  <span>{{ index + 1 }}</span>
                  <span style="margin-left: 0.7em">{{ item.reportTemplateName }}</span>
                </div>
              </div>
            </div>
          </Pane>
          <Pane size="85">
            <div style="white-space: normal !important;width:100%;height:100%;">
              <ActiveReportViewer :reportName="rptId" :reportParamter="rptParams" :isShowParamPanel="isSHowParamPanel" />
            </div>
          </Pane>
        </Splitpanes>
      </template>
      <template #footer>
        <el-button @click="toggleModal">取 消</el-button>
        <!-- <el-button type="primary" @click="prviewPrintDialog">打 印</el-button> -->
      </template>
    </vxe-modal>
  </div>
</template>
<script lang="ts" setup>
import { ref, reactive, getCurrentInstance, onMounted, watch, toRefs } from 'vue';
import { pageSizes, IsEmpty, newGuid } from '../utils/common';
import { VxeMessage, VxeNotifyType } from '@/utils/CommonMessage';
import ActiveReportViewer from './ActiveReportViewer.vue';
import { Splitpanes, Pane } from 'splitpanes';

const compId: string = newGuid();
let { proxy }: any = getCurrentInstance();
let props = defineProps({
  reportList: Array as () => any[], //动态列和字段名
  searchParam: {}, //接口参数{key1:value1,key2:value2...}
  toggle: { type: Boolean, default: false }, //是否需要分页
  width: { type: String, default: '80%' }, //表格宽度
  height: { type: String, default: '95%' }, //表格高度
  minWidth: { type: String, default: '460' }, //表格宽度
  minHeight: { type: String, default: '320' }, //表格高度
  modalTitle: String, //弹窗标题
  placeholder: { type: String, default: '点击选择' } //弹框标题
}) as any;

/**
 * 监听弹窗是否显示隐藏
 */
watch(
  () => props.toggle,
  (n, o) => {
    toggleProxy.value = n;
  },
  { immediate: false, deep: true }
);

watch(
  () => props.reportList,
  (n, o) => {
    if (n && n.length > 0) {
      rptId.value = n[0].reportId;
      Object.assign(rptParams, {
        id: 'w' + new Date().valueOf(),
        reportId: n[0].reportId,
        reportParams: [
          { Name: 'imgurl', Values: [n[0].imgurl] },
          { Name: 'IQCMaterialId', Values: [n[0].IQCMaterialId] },
          { Name: 'XMId', Values: [n[0].XMId] },
          { Name: 'QCDateS', Values: [n[0].QCDateS] },
          { Name: 'QCDateE', Values: [n[0].QCDateE] }
        ]
      });
    }
  },
  { immediate: true, deep: true }
);

/**
 * 变量
 */
const toggleProxy = ref(false);
const rptId = ref('');
const rptParams: any = reactive({});
const isSHowParamPanel = ref(true);

onMounted(() => {
  //todo
});

/**
 * 切换弹窗显示隐藏
 */
function toggleModal() {
  toggleProxy.value = !toggleProxy.value;
}

/**
 * 窗体关闭触发
 */
function modalClose() {
  toggleProxy.value = false;
}

/**
 * 选择显示列表
 */
function reportItemClick(item) {
  rptParams.reportId = '';
  if (IsEmpty(item) || IsEmpty(item.reportId)) {
    return;
  }
  if (IsEmpty(item.reportId)) {
    return;
  }
  for (const iterator of props.reportList) {
    iterator.isChecked = false;
  }
  rptId.value = item.reportId;
  setTimeout(() => {
    Object.assign(rptParams, {
      id: 'w' + new Date().valueOf(),
      reportId: item.reportId,
      reportParams: [{ Name: 'Id', Values: [item.id] }]
    });
  }, 100);
  item.isChecked = true;
}
/**
 * 打印文档
 */
function prviewPrintDialog() {
  //todo
}
</script>
<style lang="scss" scoped>
.row-item {
  padding: 5px 0 5px 5px !important;
  font-size: 1.1em;
  font-weight: 550;
  border: 0.5px #eee solid;
  border-radius: 0.3em;
  margin-right: 10px;
  cursor: pointer;
}

.actived {
  background-color: #205f78;
  color: #ffffff;
}
</style>